.page-item-detail {
  background-color: #f5f6fa;
  .container {
    .content-top {
      display: flex;
      margin-bottom: 20px;
      margin-top: 30px;
      .logo-img {
        width: 80px;
        height: 80px;
        border: 1px solid #f5f6fa;
        margin-left: 5px;
      }
      .top-info {
        display: flex;
        margin-left: 16px;
        flex-direction: column;
        .shop-name {
          font-size: 18px;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #3b3b3b;
          margin: 6px 10px 6px 0px;
        }
      }
      .left-icon {
        font-size: 14px;
      }
      
      .color-icom{
        font-size: 14px;
        color: red;
      }
      .words-color {
        font-size: 14px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #8c8c8c;
      }
    }
    .content-middle {
      display: flex;
      align-items: center;
      background: #ffffff;

      .sort-title {
        width: 234px;
        height: 48px;
        background: #ff5d02;
        font-size: 16px;
        font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
        font-weight: 800;
        color: #ffffff;
        line-height: 48px;
        text-align: center;
        margin-right: 20px;
      }
    }

    .content-bottom {
      padding-top: 20px;
      display: flex;
      background: #f5f6fa;
      .goods-sort {
        width: 234px;
        min-height: 600px;
        padding-bottom: 15px;
        background-color: #fff;
        .list-boby {
          padding-left: 25px;
          font-size: 20px;
          .content-icon {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #3b3b3b;
          }
          .list-boby-next {
            margin-top: 10px;
            padding-left: 10px;
            // background: #f5f5f5;
            // border: 1px solid rgba($color: gray, $alpha: 0.4);
            .next-menu {
              // border-bottom: 1px solid rgba($color: gray, $alpha: 0.4);
              text-align: left;
              font-size: 16px;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-weight: 400;
              color: #3b3b3b;
              display: flex;
              justify-content: space-between;
            }
            .three-menu {
              li {
                font-size: 16px;
                font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                font-weight: 400;
                color: #8c8c8c;
              }
            }
          }
          li {
            margin: 10px;
          }
        }
      }

      .cotent-right {
        display: flex;
        flex-direction: column;

        margin-left: 20px;
        background: #fff;
        flex: 1;
        min-height: 600px;
        .content-nothing {
          font-size: 50px;
          text-align: center;
          line-height: 600px;
          letter-spacing: 4px;
        }

        .right-imgs {
          display: flex;
          flex-wrap: wrap;
          flex: 1;
          .right-list {
            margin: 24px 0px 0px 24px;
            .list-img {
              .show-img {
                width: 190px;
                height: 190px;
                background: #fff;
              }
              .imgsInfo-list {
                display: flex;
                margin: 5px 0px;
                .imgs-info {
                  width: 40px;
                  height: 40px;
                  background: burlywood;
                  margin-right: 10px;
                }
              }
            }
            .price {
              margin-top: 10px;
              font-size: 16px;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-weight: 500;
              color: #ff0036;
            }
            .introduce {
              width: 202px;
              margin-top: 10px;
              font-size: 14px;
              font-family: SourceHanSansCN-Medium, SourceHanSansCN;
              font-weight: 500;
              color: #3b3b3b;
            }
          }
          .imgs-btn {
            width: 180px;
            height: 36px;
            border-radius: 2px;
            border: 1px solid #ff0036;
            font-size: 14px;
            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
            font-weight: 400;
            color: #ff0036;
            line-height: 36px;
            margin-left: 9px;
            margin-top: 10px;
            text-align: center;
          }
        }
        .pagination-wrap {
          text-align: right;
          margin-top: 20px;
          margin-right: 20px;
          margin-bottom: 10px;
        }
      }
    }
    
  }
  .popup {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.33);
    z-index: 10;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    .popup-item {
      width: 640px;
      background: #ffffff;
      color: black;
      .item-top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eeeeee;
        padding: 16px 24px;
        &-content {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 600;
          color: #3b3b3b;
        }
      }
      .item-center {
        border-bottom: 1px solid #eeeeee;
        padding-left: 24px;
        margin-top: 8px;
        &-content {
          .content-list {
            display: flex;
            .list-title {
              width: 100px;
              text-align: right;
              padding-top: 24px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #3b3b3b;
            }
            .list-lable {
              display: flex;
              flex-wrap: wrap;
              margin-left: 24px;
              .list-content {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #3b3b3b;
                padding: 9px 28px;
                border: 1px solid #dddddd;
                margin-right: 24px;
                margin-top: 16px;
              }
              .select-content {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ff5d02;
                padding: 9px 28px;
                border: 1px solid #ff5d02;
                margin-right: 24px;
                margin-top: 16px;
              }
            }
          }
        }

        &-number {
          display: flex;
          align-items: center;
          /* margin-top: 24px;
          margin-left: 100px; */
          margin: 24px 0px 24px 100px;
          .number-title {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
            margin-right: 8px;
          }
          .number-lable {
            display: flex;
            align-items: center;
            border: 1px solid #dddddd;
            height: 32px;
            input {
              border: 0;
              background-color: #ffffff;
              font-size: 14px;
              width: 58px;
              margin-left: 8px;
            }
            .lable-btn {
              display: flex;
              flex-direction: column;
              border-left: 1px solid #dddddd;
              button {
                margin: 0px;
                width: 22px;
                background: #ffffff;
                text-align: center;
                border: 0px;
                padding: 0px;
                font-size: 10px;
              }
            }
          }
        }
        .btn-box {
          height: 14px;
          line-height: 16px;
        }
      }
      .item-bottom {
        margin: 24px auto 24px 200px;
        .car-btn {
          width: 260px;
          height: 40px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          background: #ff5d02;
          border: 0px;
        }
      }
    }
  }
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
} 
}
